import React, { Component } from 'react'
import './index.css';
export default class Footer extends Component {
    render() {
        let todoFinish = this.props.todos.filter(item => item.done).length;
        let todoAll = this.props.todos.length;
        return (<div className="todo-footer">
            <label>
                <input type="checkbox" 
                onChange={this.checkTodoAll}
                checked={this.props.todos.every(item => item.done)}
                />
            </label>
            <span>
                <span>已完成{todoFinish}</span> / 全部{todoAll}
        </span>
            <button className="btn btn-danger"
            onClick={this.clearTodo}
            >清除已完成任务</button>
        </div>
        )
    }
    clearTodo = () => {
        this.props.clearTodo();
    }
    checkTodoAll = (e) => {
        this.props.checkTodoAll(e.target.checked);
     }
}
